<template>
  <view class="notice-noticeList">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <view class="notice-top">
      <view class="notice-top-left">
        共<text style="color:#FF5E01;padding:0 5px;font-weight: bold;">{{count}}</text>条信息
      </view>
      <view class="notice-top-right">
        <u-button text="全部设为已读" size="small" shape="circle" type="primary" :custom-style="style" :plain="true"
          @click="clickMessageSetView(0)"></u-button>
      </view>
    </view>
    <view v-if="list.length>0" style="padding:32rpx;">
      <view class="notice-content" v-for="item in list" :key='item.messageId' @click="clickMessageSetView(item)">
        <view class="notice-content-top">
          <text style="font-weight:bold">{{item.messageTypeStr}}</text>
          <view class="content-top-right">
            <view v-if='item.isView==0'> <u-badge :isDot="true" type="error"></u-badge></view>
            <text>{{item.createTime}}</text>
          </view>
        </view>
        <view class="notice-content-bottom">
          <text class="content-bottom-left">{{item.messageContent}}</text>
        </view>
      </view>
      <div style="padding-bottom:40rpx;">
        <u-loadmore :status="status"></u-loadmore>
      </div>
    </view>


    <view v-else style="text-align: center;line-height: 300px">
      <text style="color: #929292;">--暂无消息--</text>
    </view>
  </view>

  </view>
</template>

<script>
  import {
    messageList,
    messageSetView
  } from '@/config/api2.js'
  const defaultListQuery = {
    "isView": "",
    "pageSize": 20,
    "pageNum": 1
  };
  export default {
    data() {
      return {
        style: {
          width: '180rpx',
          marginRight: '10rpx',
        },
        list: [],
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        status: 'loadmore',
        count: 0,
      }
    },
    onLoad() {
      // sthis.clearData();
      // this.getMessageList()
    },

    onShow() {
      this.clearData();
      this.getMessageList()
    },
    onReachBottom() {
      if (this.list.length >= this.count) {
        this.status = 'nomore';
        return;
      }
      this.listQuery.pageNum++
      this.getMessageList()
    },
    methods: {

      //清除数据
      clearData() {
        this.listQuery.pageNum = 1;
        this.list = [];
        this.status = 'loadmore';
        this.count = 0;
      },
      getMessageList() {
        messageList(this.listQuery).then(res => {
          this.count = res.count
          this.list = this.list.concat(res.list ? res.list : []);
          if (this.list.length >= this.count) {
            this.status = 'nomore';
          } else {
            this.status = 'loadmore';
          }
        })
      },
      clickMessageSetView(data) {
        if (data) {
          messageSetView({
            messageId: data.messageId
          }).then(res => {
            uni.navigateTo({
              url: data.locationUrl
            })
          })
        } else {
          if (this.list.length > 0) {
            messageSetView({
              messageId: data
            }).then(res => {
              uni.showToast({
                title: '已全部设为已读!',
                icon: 'success'
              });
              this.clearData()
              this.getMessageList()
            })
          } else {
            uni.showToast({
              title: '暂无消息!',
              icon: 'none'
            });
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  @import '@/style/wmj.scss';
  .notice-top{
	  background: #fff;
	  box-shadow: -10px 10px rgba(0, 17, 52, 0.01);
  }
  .notice-content{
	  background: #fff;
	  border-radius: 18rpx;
	  margin-bottom:40rpx !important;
	  box-shadow: 0px 0px 10px rgba(0, 17, 52, 0.01);
  }
</style>